<template>
  <div>
    <div class="filter-container" style="margin-bottom:10px">
      <el-input style="width: 50%" class="input-with-select" placeholder="请输入技师手机号码" v-model="search" @keyup.enter.native="query()">
      </el-input>
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="sou">
        搜索
      </el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 99%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      max-height="800px" @selection-change="handleSelectionChange"
      @current-change="openRoute">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="执业类型">
              <span>
                <el-tooltip placement="top" effect="light">
                  <div slot="content">
                    <el-card :body-style="{ padding: '0px' }" v-for="(item, i) in props.row.doc_type" :key="i"
                      style="display: inline-block;margin: 10px;">
                      <img :src="item.img" class="image" style="width:300px" />
                      <div style="padding: 14px;">
                        <span class="typename">执业类型：{{ item.type.name }}</span>
                        <div class="bottom clearfix">
                          <time class="time">获得资格证时间：{{ item.auth_time }}</time>
                        </div>
                      </div>
                    </el-card>
                  </div>
                  <el-button class="typebtn">悬停查看</el-button>
                </el-tooltip>
              </span>
            </el-form-item>
            <el-form-item label="注册时间">
              <span>{{ props.row.user.cTime }}</span>
            </el-form-item>
          <!--  <el-form-item label="身份证号码">
                  <span>{{ props.row.user.card }}</span>
                </el-form-item> -->
          <!--  <el-form-item label="身份证照片">
                  <span style="display:flex">
                    <el-image :src="domain + props.row.user.cert_a" class="idc"></el-image>
                    <el-image :src="domain + props.row.user.cert_b" class="idc"></el-image>
                  </span>
                </el-form-item> -->
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column
        prop=""
        label="序号"
        width="50"
        align="center">
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column label="头像" align="center" width="150">
         <template slot-scope="scope" v-if="scope.row.userPhoto!=null" >
          <el-image style="width:30px;height:30px;" :src="scope.row.userPhoto"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="user.name" label="姓名" width="100" align="center">
      </el-table-column>
      <el-table-column prop="user.card" label="身份证" width="220" align="center">
      </el-table-column>
      <el-table-column prop="user.tel" label="手机号" width="150" align="center">
      </el-table-column>
      <el-table-column prop="job_address" label="职业地点" width="150" align="center">
      </el-table-column>
      <el-table-column prop="rank" label="等级" width="120" align="center">
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="danger" @click.stop="del(scope.$index, scope.row)" size="small" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagectn" v-if="pages > 10">
      <el-pagination :page-size="10" layout="total, prev, pager, next, jumper" :total="pages"
        @current-change="pagechange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {
    getdoctor,
    doctornum,
    deletetDoc
  } from '@/api/user/user.js'
  export default {
    data() {
      var $domain = process.env.VUE_APP_BASE_API
      return {
        tableData: [],
        search: '',
        pages: 0,
        domain: $domain,
        thispage: 1
      }
    },
    created() {
      this.requestdoctor(1)
      this.requestpage()
    },
    methods: {
      sou() {
        this.tableData = []
        var that = this
        var data = {
          field: 'tel',
          value: that.search,
          op: '='
        }
        getdoctor(data).then(res => {
          res.forEach(item=>{
            if(item.user!=null){
              item.userPhoto = item.user.photo
            }else{
              item.userPhoto=null
            }
          })
          that.tableData = res
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      del(index, row) {
        let that = this;
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deletetDoc({
            field: "doc_id",
            op: "=",
            value: row.doc_id
          }).then(() => {
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
            that.$router.go(0)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      requestdoctor(pages) {
        var that = this
        this.tableData = []
        var data = {
          field: 'status',
          value: '1',
          op: '=',
          order_by: "cTime",
          page: pages
        }
        getdoctor(data).then(res => {
          res.forEach(item=>{
            if(item.user!=null){
              item.userPhoto = item.user.photo
            }else{
              item.userPhoto=null
            }
          })
          that.tableData = res
        })
      },
      openRoute(e) {
        var id = e.user.u_id
        var docid = e.doc_id
        var tel = e.user.tel
        this.$router.push({
          path: 'info',
          query: {
            id,
            docid,
            tel
          }
        })
      },
      requestpage() {
        var that = this
        var data = {
          field: 'status',
          op: '=',
          value: '1'
        }
        doctornum(data).then(res => {
          that.pages = res
        })
      },
      pagechange(page) {
        this.requestdoctor(page)
        this.thispage = page
      },
    }
  }
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-bottom: 0;
    width: 100%;
    white-space: pre-line;
  }
  .idc {
    margin-right: 15px;
    width: 40%;
  }
  .pagectn {
    width: 100%;
    background-color: #fff;
    padding: 5px;
    position: fixed;
    bottom: 0;
    z-index: 100;
  }
</style>
